import React, { useState, useEffect } from 'react';
import { Card, Tag, Button, Spin, Space, message } from 'antd';
import { ArrowLeftOutlined, ClockCircleOutlined, EnvironmentOutlined, TeamOutlined } from '@ant-design/icons';
import { history, useParams } from '@umijs/max';
import { getActivityDetail, ActivityInfo } from '@/services/ActivityService';
import dayjs from 'dayjs';
import styles from './detail.less';

// 活动类型配置
const ActivityType = {
  ONLINE: { value: 1, text: '线上活动', color: 'blue' },
  OFFLINE: { value: 2, text: '线下活动', color: 'green' },
  LIVE: { value: 3, text: '直播活动', color: 'purple' },
};

// 活动状态配置
const ActivityStatus = {
  NOT_STARTED: { value: 0, text: '未开始', color: 'default' },
  IN_PROGRESS: { value: 1, text: '进行中', color: 'processing' },
  ENDED: { value: 2, text: '已结束', color: 'success' },
  CANCELED: { value: 3, text: '已取消', color: 'error' },
};

const ActivityDetail: React.FC = () => {
  const { idBase64 } = useParams<{ idBase64: string }>();
  const [loading, setLoading] = useState(true);
  const [activity, setActivity] = useState<ActivityInfo>();

  const loadActivityDetail = async (id: number) => {
    try {
      setLoading(true);
      const data = await getActivityDetail(id);
      setActivity(data);
    } catch (error) {
      message.error('获取活动详情失败');
    //   history.push('/activity');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    const id = atob(idBase64 || '');
    loadActivityDetail(Number(id));
  }, [idBase64]);

  

  const getTypeInfo = (type: number) => {
    return Object.values(ActivityType).find(t => t.value === type);
  };

  const getStatusInfo = (status: number) => {
    return Object.values(ActivityStatus).find(s => s.value === status);
  };

  if (!activity) {
    return <Spin spinning={loading} />;
  }

  const typeInfo = getTypeInfo(activity.type);
  const statusInfo = getStatusInfo(activity.status);

  const handleBack = () => {
    history.back();
  };

  return (
    <div className={styles.container}>
      <Card
        title={
          <div style={{marginLeft: '-15px'}}>
            <Button
              type="link"
              icon={<ArrowLeftOutlined />}
              onClick={handleBack}
            >
              返回
            </Button>
          </div>
        }
      >
        <Spin spinning={loading}>
          <div className={styles.content}>
            <div className={styles.title}>
              <h1>{activity.title}</h1>
              <Space size={12}>
                <Tag color={typeInfo?.color}>{typeInfo?.text}</Tag>
                <Tag color={statusInfo?.color}>{statusInfo?.text}</Tag>
              </Space>
            </div>

            <div className={styles.info}>
              <div className={styles.infoItem}>
                <ClockCircleOutlined />
                <span className={styles.label}>活动时间：</span>
                <span>
                  {dayjs(activity.startTime).format('YYYY-MM-DD HH:mm')} 至{' '}
                  {dayjs(activity.endTime).format('YYYY-MM-DD HH:mm')}
                </span>
              </div>

              {activity.location && (
                <div className={styles.infoItem}>
                  <EnvironmentOutlined />
                  <span className={styles.label}>活动地点：</span>
                  <span>{activity.location}</span>
                </div>
              )}

              {activity.maxParticipants && (
                <div className={styles.infoItem}>
                  <TeamOutlined />
                  <span className={styles.label}>参与人数：</span>
                  <span>
                    {activity.currentParticipants || 0}/{activity.maxParticipants}
                  </span>
                </div>
              )}

              {activity.registrationDeadline && (
                <div className={styles.infoItem}>
                  <ClockCircleOutlined />
                  <span className={styles.label}>报名截止：</span>
                  <span>
                    {dayjs(activity.registrationDeadline).format('YYYY-MM-DD HH:mm')}
                  </span>
                </div>
              )}
            </div>

            <div className={styles.description}>
              <h2>活动简介</h2>
              <p>{activity.description}</p>
            </div>

            <div className={styles.detail}>
              <h2>活动详情</h2>
              <div 
                className={styles.content} 
                dangerouslySetInnerHTML={{ __html: activity.content || '' }}
              />
            </div>

            {activity.status === ActivityStatus.NOT_STARTED.value && (
              <div className={styles.actions}>
                <Button type="primary" size="large">
                  立即报名
                </Button>
              </div>
            )}
          </div>
        </Spin>
      </Card>
    </div>
  );
};

export default ActivityDetail; 